import React, { Component } from 'react';
import {
  View,Text,StyleSheet,ScrollView,TextInput,Modal,
    Platform
} from 'react-native';
import pxToDp from '../common/comm';
import ModalDropdown from 'react-native-modal-dropdown';
import * as DATA from '../data/data';

export default class Account extends Component {
  constructor(props){
    super(props);
    this.state={
      loginkey:this.props.navigation.state.params.userInfo.loginkey||null,
      text_zfb:'',
      text_xm:'',
      text_bank:'',
      text_khh:'请选择开户行',
      text_name:'',
      zfb:{},
      yhk:{},
      isModal:false,
      alertTxt:'',
        isHasAccount:this.props.navigation.state.params.isHasAccount||false
    };
  }

  static navigationOptions={
    headerTintColor:'#fff',
    headerTitle: '完善渠道',
    headerStyle: {
      backgroundColor: DATA.BASE_COLOR,
        height:Platform.OS === 'android'?pxToDp(84):pxToDp(110)
    },
    headerTitleStyle: {
      color: '#fff',
      fontSize: pxToDp(34),
        marginLeft:Platform.OS === 'android'?pxToDp(185):null
    },
    gesturesEnabled :true
  }

  //提示框3秒后消失
  _show(txt) {
    this.setState({
      isModal: true,
      alertTxt: txt
    });
    this.timer = setTimeout(() => {this._hide()},2000);
  }

  _hide() {
    this.setState({
      isModal:false
    })
  }

  checkAccount(){
    let text_zfb = this.state.text_zfb;
    let text_xm = this.state.text_xm;
    let _that = this;
    //支付宝
    reg = /^([\u4e00-\u9fa5]){2,7}$/; //判断姓名格式
    if (text_zfb == '') {
      alert('请完善支付宝信息');
      return false;
    }else if(!reg.test(text_xm) || text_xm == ''){
      alert('请添写正确姓名');
      return false;
    }
    let text_bank = this.state.text_bank;
    let text_khh = this.state.text_khh;
    let text_name = this.state.text_name;

    return true;
  }

  componentWillMount(){
    if(!this.props.navigation.state.params.isHasAccount){
      let _that = this;
      let data2 = 'loginkey='+this.state.loginkey;
      fetch(DATA.ACCOUNT_URL,{
        method: "POST",
        headers:{'Content-Type': 'application/x-www-form-urlencoded' },
        body: data2
      })
          .then((response) => {       // 数据解析方式
            if (response.ok) {
              return response.json();
            }
          })
          .then((responseData) => {       // 获取到的数据处理
            if(responseData.status == 1){
              _that.setState({
                zfb:responseData.zfb,
                yhk:responseData.yhk,
                text_zfb:responseData.zfb.number,
                text_xm:responseData.zfb.name,
                text_bank:responseData.yhk.number,
                text_khh:responseData.yhk.institution,
                text_name:responseData.yhk.name
              })
            }
          })
          .catch((error) => { // 错误处理
            _that._show('A获取数据失败，请重试！');
          })
          .done();
    }
  }

  _onPress(){
    let isCheck = this.checkAccount();
    if(isCheck){
      let _that = this;
      if(isCheck){
        let zfb = {
          id:this.state.zfb.id||'',
          number:this.state.text_zfb,
          name:this.state.text_xm,
          type:'1',
          institution:'支付宝'
        };
        let yhk ={
          id:this.state.yhk.id||'',
          number:this.state.text_bank,
          name:this.state.text_name,
          type:'2',
          institution:this.state.text_khh
        };

        let info = [zfb,yhk];
        let _that = this;
        let data2 = 'loginkey='+this.state.loginkey+'&info1='+JSON.stringify(zfb)+'&info2='+JSON.stringify(yhk);
        fetch(DATA.SAVENUMBER_URL,{
          method: "POST",
          headers:{'Content-Type': 'application/x-www-form-urlencoded' },
          body: data2
        })
            .then((response) => {       // 数据解析方式

              if (response.ok) {
                return response.json();
              }
            })
            .then((responseData) => {       // 获取到的数据处理
              if(responseData.status == 1){
                _that._show(responseData.msg);
                //setTimeout(()=>{
                //  _that.props.navigation.navigate('Mypage');
                //},1000)
              }
            })
            .catch((error) => { // 错误处理
              _that._show('获取数据失败，请重试！');
            })
            .done();
      }
    }
  }
  render() {
    let _that = this;
    return (
      <ScrollView
        contentContainerStyle={styles.contentContainer}
      >
        <Modal
            animationType='fade'            // 淡入淡出
            transparent={true}              // 透明
            visible={this.state.isModal}    // 根据isModal决定是否显示
            onRequestClose={() => {this.onRequestClose()}}  // android必须实现
        >
          <View style={modalStyle.modalViewStyle}>
            <View style={modalStyle.hudViewStyle}>
              <Text style={modalStyle.hudTextStyle}>{this.state.alertTxt}</Text>
            </View>
          </View>
        </Modal>
        <View>
          <View style={styles.row}>
            <Text style={[styles.title,{marginLeft:pxToDp(25)}]}>支付宝账号：</Text>
            <TextInput
                autoFocus={true}
                underlineColorAndroid="transparent"
                style={styles.input}
                onChangeText={(text)=>{this.setState({text_zfb:text})}}
                value={this.state.text_zfb}
            />
          </View>  
          <View style={[styles.row,{borderBottomWidth: pxToDp(5)}]}>
            <Text style={[styles.title,{marginLeft:pxToDp(25)}]}>姓      名：</Text>
            <TextInput
                underlineColorAndroid="transparent"
                style={[styles.input, { marginLeft: pxToDp(10) }]}
                onChangeText={(text)=>{this.setState({text_xm:text})}}
                value={this.state.text_xm}
            />
          </View>
          <View style={[styles.row]}>
            <Text style={[styles.title, { marginLeft: pxToDp(25)}]}>银行卡号：</Text>
            <TextInput
                keyboardType='numeric'
                underlineColorAndroid="transparent"
                style={styles.input}
                onChangeText={(text)=>{this.setState({text_bank:text})}}
                value={this.state.text_bank}
            />
          </View>
          <View style={styles.row}>
            <Text style={[styles.title,{marginLeft:pxToDp(25)}]}>开户行：</Text>
            <ModalDropdown
                textStyle={styles.btnText}
                style={styles.btn}
                dropdownStyle={styles.down}
                defaultValue={this.state.text_khh}
                options={DATA.bankNames}
                onSelect={(index,value)=>{
                  _that.setState({
                    text_khh:value
                  });
                 }}
                />
          </View>
          <View style={styles.row}>
            <Text style={[styles.title, { marginLeft: pxToDp(25) }]}>姓      名：</Text>
            <TextInput
                underlineColorAndroid="transparent"
                style={[styles.input, { marginLeft: pxToDp(10) }]}
                onChangeText={(text)=>{this.setState({text_name:text})}}
                value={this.state.text_name}
            />
          </View>
        </View>  
        <Text style={{marginTop:pxToDp(50)}}>注：请如实填写真实信息，有助于日后提现</Text>
        <Text style={styles.submit} onPress={()=>this._onPress()}>提交</Text>
      </ScrollView>
    );
  }
}

var styles = StyleSheet.create({
    contentContainer: {
      paddingVertical: 20,
      alignItems:'center'
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    borderBottomWidth: pxToDp(1),
    borderBottomColor: '#ddd',
    height:pxToDp(100)
  },
  title: {
    fontWeight: 'bold',
    fontSize:pxToDp(26)
  },
  input: {
    width: pxToDp(450),
    fontSize:pxToDp(26)
  },
  submit: {
    width: pxToDp(400),
    height: pxToDp(70),
    backgroundColor: DATA.BASE_COLOR,
    color: '#fff',
    textAlign: 'center',
      textAlignVertical:'center',
      borderRadius:pxToDp(20),
    paddingTop:Platform.OS === 'android'?null:pxToDp(20),
    fontSize: pxToDp(34),
    marginTop:pxToDp(100)
  }
  });
const modalStyle = StyleSheet.create({
  modalViewStyle: {
    position: 'absolute',
    top:pxToDp(900),
    alignSelf:'center'
  },
  hudViewStyle: {
    backgroundColor: 'rgba(0,0,0,0.5)',
    paddingLeft:pxToDp(15),
    paddingRight:pxToDp(15),
    paddingTop:pxToDp(10),
    paddingBottom: pxToDp(10),
    borderRadius:pxToDp(10)
  },
  hudTextStyle: {
    color:'#fff'
  }
})

